.circle {
    width: 527px;
    height: 527px;
    border-radius: 50%;
    padding: 20px;
    background: linear-gradient(-90deg, #F32B30 0%, #FFB059 33.3%, #44C0FA 100%);

    &_inner {
        position: relative;
        width: 487px;
        height: 487px;
        border-radius: 50%;
        background: #fff;

        >ul {
            display: inline-block;
            list-style: none;
            height: 0px;
            transform: rotateZ(15deg) translate(276px, -77px);
        }

        :global {
            .li {
                list-style: none;
                position: absolute;
                left: 50%;
                top: 12px;
                width: 4px;
                height: 8px;
                background-color: #E5E5E5;
                transform-origin: center 232px;
            }

            .lip {
                width: 4px;
                height: 14px;
                top: 12px;
                background-color: #D4D1D1;
                transform-origin: center 232px;
            }
        }
    }


}

.innerCircle {
    position: relative;
    width: 316px;
    height: 316px;
    // border-radius: 50%;
    // padding: 4px;
    // background: #FFE6D8;
    margin: 54px auto;
    // z-index: 10;


    &_inner {
        position: relative;
        width: 316px;
        height: 316px;
        border-radius: 50%;
        background: #fff;
        z-index: 10;
        border-width: 4px;
        border-style: solid;
        border-color: #FFE6D8;
        margin: 54px auto;
    }

    .triImg {
        position: absolute;
        width: 38px;
        height: 29px;
        transform: rotate(-106deg);
        top: 191px;
        left: -26px;
    }
}

.mask {
    position: absolute;
    width: 527px;
    height: 193px;
    bottom: 0;
    background: #fff;
    z-index: 11;
}

.sector {
    position: absolute;
    width: 487px;
    height: 487px;
    border-radius: 100%;
    border-width: 86px;
    border-style: solid;
    top: 0;
}

.greenText,
.yellowText,
.redText {
    position: absolute;
    font-family: AlibabaPuHuiTi-Bold;
    font-weight: 700;
    font-size: 26px;
    color: #E5E5E5;
}

.greenText {
    top: 189px;
    transform: rotate(-81deg);
    left: 24px;
}

.yellowText {
    top: 28px;
    left: 216px;
}

.redText {
    top: 189px;
    transform: rotate(81deg);
    right: 24px;
}

.greenActiveText {
    color: #199ED8;
}

.redActiveText {
    color: #F57130;
}

.redActiveText {
    color: #F33232;
}